<template>
  <div class="box">
    <el-row>
      <el-col :span="24"><img style="height: 60px; width: 60px" src="../../assets/logo.png"/></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <h2 class="login_title">用户登录</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="2"><label class="tag">手机号</label></el-col>
      <el-col :span="12">
        <el-input v-model="username" type="text" clearable>
          <template #prefix>
            <span class="iconfont icon-shouji"></span>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="2">
        <label v-if="isPass" class="tag">密码</label>
        <label v-if="!isPass" class="tag">验证码</label>
      </el-col>
      <el-col :span="12" v-if="isPass">
        <el-input v-model="password" type="password" show-password>
          <template #prefix>
            <span class="iconfont icon-mima"></span>
          </template>
        </el-input>
      </el-col>
      <el-col :span="7" v-if="!isPass">
        <el-input v-model="mailCode" type="text" clearable>
          <template #prefix>
            <span class="iconfont icon-ziyuan"></span>
          </template>
        </el-input>
      </el-col>
      <el-col :span="5" v-if="!isPass">
        <el-button round :disabled="sendDisabled"    @click="getCode">{{ sendValue }}</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="15" :offset="3">
        <el-link type="danger" style="margin-left: 0px" @click="this.$router.push('/register')">没有账号？去注册
        </el-link>
        <el-button type="primary" size="large" id="loginBtn" @click="clickLogin">登录</el-button>
        <el-link type="danger" @click="this.$router.push('/register/findPassword')">忘记密码</el-link>
      </el-col>
    </el-row>
<!--    <br>
    <el-button type="" link @click="changeLogin" v-if="isPass">切换为短信登录</el-button>
    <el-button type="" link @click="changeLogin" v-if="!isPass">切换为密码登录</el-button>-->
    <el-row class="change">
      <el-button type="" link @click="changeLogin" v-if="isPass">切换为短信登录</el-button>
      <el-button type="" link @click="changeLogin" v-if="!isPass">切换为密码登录</el-button>
    </el-row>
  </div>
</template>
<script>
import axios from "axios"
import { ElMessage } from 'element-plus'


export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: 'login',
  data() {
    return {
      isPass: true,
      password: '',
      username: '',
      mailCode: '',
      timer:null,
      times:60,
      sendValue:"发送验证码",
      sendDisabled:false,
    }
  },


  methods: {
    testMsg:function (){
    ElMessage.error("666")
    },
    getCode: function () {//获取验证码

      let a = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/

      if (!a.test(this.username)) {
        // alert('请输入正确的手机号')
        ElMessage.info('请输入正确的手机号')
      } else {
        axios({
          method: 'post',
          url: '/api/login/getlogincode',
          data: {
            username: this.username,
          },
        })
            .then((res) => {
              if (res.data.code === '1') {//获取成功
                ElMessage.success(res.data.message)
                this.timer=setInterval(()=>{
                  this.times--;
                  if(this.times<=0){
                    this.sendValue='发送验证码';
                    clearInterval(this.timer);
                    this.times=60;
                    this.sendDisabled=false;
                  }else{
                    this.sendValue=this.times+'秒后重试';
                    this.sendDisabled=true;
                  }
                },1000)



              } else if (res.data.code === '0') {
                ElMessage.error(res.data.message)
              }
            });
      }
    },
    changeLogin: function () {
      this.isPass = !this.isPass;
    },
    clickLogin: function () {//点击登录，向后端发送请求，获取数据
      if (this.isPass) {//密码登录
        axios({
          method: 'post',
          url: '/api/login',
          data: {
            username: this.username,
            password: this.password
          },
        })
            .then((res) => {
              if (res.data.code === '1') {//登录成功
                ElMessage.success(res.data.message)
                sessionStorage.setItem('user', JSON.stringify(res.data.data))

                if (res.data.data.userType === '司机') {
                  this.$router.push('/driver')
                } else if (res.data.data.userType === '审核员') {
                  this.$router.push('/auditor')
                } else if (res.data.data.userType === '管理员') {
                  this.$router.push('/administrator')
                }
              } else if (res.data.code !== '1') {
                ElMessage.error(res.data.message)
              }
            });
      } else {//验证码登录
        axios({
          method: 'post',
          url: '/api/login/loginCode',
          data: {
            username: this.username,
            code: this.mailCode
          },
        })
            .then((res) => {
              if (res.data.code === '1') {//登录成功
                ElMessage.success(res.data.message)
                sessionStorage.setItem('user', JSON.stringify(res.data.data))
                if (res.data.data.userType === '司机') {
                  this.$router.push('/driver')
                } else if (res.data.data.userType === '审核员') {
                  this.$router.push('/auditor')
                } else if (res.data.data.userType === '管理员') {
                  this.$router.push('/administrator')
                }
              } else if (res.data.code !== '1') {
                // alert(res.data.message)
                ElMessage.error(res.data.message)
              }
            });
      }


    }
  }

}
</script>
<style scoped>


.change {
  position: absolute;
  left: 70%;
  height: 30%;
}
.tag {
  font-family: "仿宋";
  font-weight: bold;
}
.login_title {
  margin: 0;
  padding: 0;
  font-size: 30px;
}

#loginBtn {
  margin-left: 5px;
  margin-right: 5px;
}


.el-row {
  margin-bottom: 20px;
}

.el-row:first-child {

  padding-top: 0px;

  margin-bottom: 5px;
}

.el-row:last-child {
  position: absolute;
  bottom: 0;
  right: 10px;
  margin-bottom: 0;
}

el-link {
  font-size: 20px !important;
}

label {
  color: #000000;
  font-weight: bolder;
  font-size: 30px;
}




.box {
  /* 超出部分要隐藏 */
  overflow: hidden;

  /* 撑开父盒子大小 */
  padding: 9vmin 8vmin;
  /* 小圆角 */
  border-radius: 5vmin;
  /* 文字颜色、大小 */
  color: #030303;

  /* 简单定位 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 显示层级最上面 */
  z-index: 0;

  width: 400px;
  /*height: 300px;*/
  height: 320px;


}
.box::before {
  content: "";

  /* 宽高要超过父级默认的大小 */
  width: 200%;
  height: 200%;
  /* 基础背景颜色 */
  background-color: #b6b3b3;
  /* conic-gradient 围绕中心点旋转的渐变 */
  background-image: conic-gradient(transparent, #0048ff, transparent 30%);

  /* 定位到中间 */
  position: absolute;
  left: -50%;
  top: -50%;
  /* 显示层级最底层 */
  z-index: -2;

  /* 旋转整个灯光渐变这一层 */
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.box::after {
  content: "";

  /* 往内撑开盒子宽高，正好小一圈当做边框 */
  inset: 1vmin;
  background: #fafafa;
  border-radius: 4vmin;

  position: absolute;
  /* 显示层级中间，盖住最后一层的灯光 */
  z-index: -1;
}
</style>